import React, { memo } from "react";
import { useDispatch, useSelector, shallowEqual } from "react-redux";
import classnames from "classnames";

import "./index.scss";
import { artistCategories } from "common/local-data";
import artistActions from "store/action/artist";

export default memo(function WYArtistCategory() {
  const { currentArea, currentType } = useSelector(
    (state) => ({
      currentArea: state.getIn(["artist", "currentArea"]),
      currentType: state.getIn(["artist", "currentType"]),
    }),
    shallowEqual
  );
  const dispatch = useDispatch();
  const getCurrent = ({ area }, { name, type }) => {
    dispatch(artistActions.setCurrentArea(area));
    dispatch(artistActions.setCurrentType({ name, type }));
  };
  return (
    <div className="wy-artist-category">
      {artistCategories.map((item) => (
        <div className="section" key={item.title}>
          <h2 className="title">{item.title}</h2>
          {item.artists.map((i, idx) => (
            <div
              className={classnames("section-item", {
                active:
                  item.area === currentArea && currentType.type === i.type,
              })}
              key={idx}
              onClick={(e) => getCurrent(item, i)}
            >
              <span>{i.name}</span>
            </div>
          ))}
        </div>
      ))}
    </div>
  );
});
